<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var ws;
        window.onload=function () {
            var username="CZK"
            var target="ws://localhost:8092/chat?username="+username
            if ('WebSocket' in window) {
                ws = new WebSocket(target);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(target);
            } else {
                alert('WebSocket is not supported by this browser.');
                return;
            }
            ws.onmessage=function (event) {
                eval("var msg="+event.data+";")
                console.log(msg)
                if (msg.welcome!=undefined){
                    console.log(msg.welcome)
                    document.getElementById("content").append(msg.welcome+"<br/>")
                }
               // document.getElementById("userList").innerHTML="";
                if (msg.username!=undefined){
                    document.getElementById("userList").innerHTML="";
                   // $("#userList").html("")
                    var array=msg.username;
                   for (var i in  array){
                       document.getElementById("userList").append(array[i]+"<br\>")
                   }

                }
                if (msg.content!=undefined){
                   document.getElementById("content").append(msg.content);
                }
            }
        }
        function send() {
            var msg=document.getElementById("send").value;
            ws.send(msg);
            document.getElementById("send").value="";
        }
    </script>
</head>
<body>
    <div id="content" style="border: 1px solid black;width: 100px;height: 400px;float: left"></div>
    <div id="userList" style="border: 1px solid black;width: 100px;height: 400px;float: left"></div><br>
    <input type="text" id="send"><br>
    <input type="button" value="发送" onclick="send()" >
</body>
</html>